<template>
	<div class="content">
		<el-card class="box-card proto-type">
			<h2 class="title_s"><img src="../../assets/images/title.png" alt="" style="vertical-align: middle;"/>保单信息</h2>
			<el-card class="box-card proto-type">

				<el-table :data="tableData1" border style="width: 100%" :header-cell-style="{background:'#eef1f6',color:'#606266'}">

					<el-table-column prop="date" label="保单号" width="120">
					</el-table-column>
					<el-table-column prop="name" label="保单状态" width="120">
					</el-table-column>
					<el-table-column prop="address" label="自动申报待补录" width="120">
					</el-table-column>
					<el-table-column prop="address" label="产品名称" width="120">
					</el-table-column>
					<el-table-column prop="address" label="保险公司" width="120">
					</el-table-column>
					<el-table-column prop="address" label="分支机构" width="120">
					</el-table-column>
					<el-table-column prop="address" label="投保人名称" width="120">
					</el-table-column>
					<el-table-column prop="address" label="被保险人名称" width="120">
					</el-table-column>
					<el-table-column prop="address" label="起保日期">
					</el-table-column>
					<el-table-column prop="address" label="币种">
					</el-table-column>
					<el-table-column prop="address" label="保额">
					</el-table-column>
					<el-table-column prop="address" label="保费">
					</el-table-column>

				</el-table>

			</el-card>

		</el-card>
		<el-card>
			<h2 class="title_s"><img src="../../assets/images/title.png" alt="" style="vertical-align: middle;"/>报案基本信息</h2>
			<el-card class="box-card proto-type">
				<el-form :model="inForm" :rules="rules" ref="inForm" class="demo-ruleForm" label-width="140px">
					<el-row class="search_box1">
						<el-col :span="8">
							<el-form-item label="报案方式" prop="">
								<el-select v-model="inForm.productname" placeholder="请选择" size="mini">
									<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>

							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="报案时间" prop="name">

								<el-date-picker v-model="value1" type="date" placeholder="选择日期" size="mini">
								</el-date-picker>
							</el-form-item>

						</el-col>
						<el-col :span="8">
							<el-form-item label="出险时间" prop="tions">

								<el-date-picker v-model="value1" type="date" placeholder="选择日期" size="mini">
								</el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row class="search_box1">
						<el-col :span="8">
							<el-form-item label="报案人姓名" prop="">
								<el-input v-model="inForm.input" placeholder="请输入内容" size="mini"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="报案人电话" prop="">
								<el-input v-model="inForm.input" placeholder="请输入内容" size="mini"></el-input>
							</el-form-item>

						</el-col>
						<el-col :span="8">
							<el-form-item label="报案人邮箱" prop="">

								<el-input v-model="inForm.input" placeholder="请输入内容" size="mini"></el-input>
							</el-form-item>

						</el-col>
					</el-row>
					<el-row class="search_box1">
						<el-col :span="8">
							<el-form-item label="出险原因" prop="">

								<el-select v-model="inForm.productname" placeholder="请选择" size="mini">
									<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>

					</el-row>
					<el-row class="search_box1">
						<el-col :span="24">
							<el-form-item label="出险地点" prop="">

								<el-input v-model="inForm.input" placeholder="请输入内容" size="mini" style="width:95%"></el-input>
							</el-form-item>
						</el-col>

					</el-row>
				</el-form>
			</el-card>

		</el-card>
		<el-card class="box-card proto-type">
			<h2 class="title_s"><img src="../../assets/images/title.png" alt="" style="vertical-align: middle;"/>保单基本信息</h2>
			<el-card class="box-card proto-type">

				<el-table :data="tableData2" border style="width: 100%" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
					<el-table-column type="index" label="序号">
					</el-table-column>
					<el-table-column prop="date" label="HScode" width="120">
					</el-table-column>
					<el-table-column prop="name" label="商品名称" width="120">
					</el-table-column>
					<el-table-column prop="address" label="数量" width="120">
					</el-table-column>
					<el-table-column prop="address" label="单位" width="120">
					</el-table-column>
					<el-table-column prop="address" label="单价" width="120">
					</el-table-column>
					<el-table-column prop="address" label="总价" width="120">
					</el-table-column>
					<el-table-column prop="address" label="币种" width="120">
					</el-table-column>
					<el-table-column prop="address" label="目的地" width="120">
					</el-table-column>
					<el-table-column prop="address" label="受损数量">
					</el-table-column>
					<el-table-column prop="address" label="预计损失金额">
					</el-table-column>

				</el-table>

			</el-card>

		</el-card>
		<el-card>
			<h2 class="title_s" style="overflow: hidden;"><img src="../../assets/images/title.png" alt="" style="vertical-align: middle;"/>影像文件<p style="float: right;width:60%;margin:0;color:red;font-weight: normal;text-align:right;font-size:12px;">温馨提示：仅支持上传单张大小5M以内，格式为JPG、PNG的影像文件<el-button type="primary" size="mini" style="margin:0 20px;" @click="submitUpload">上传影像</el-button></p></h2>
			<div style="display: flex;">
				<el-card class="box-card" style="width:100%;margin-right:2%;height:200px">
					<div>
						<el-upload :limit="5" multiple drag accept=".jpg,.png" ref="upload" :file-list="fileList" action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-success="success_img" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
							<i class="el-icon-plus"></i>
						</el-upload>
						<el-dialog :visible.sync="dialogVisible">
							<img width="100%" :src="dialogImageUrl" alt="">
						</el-dialog>
					</div>
				</el-card>
			</div>
		</el-card>
		<div class="submit_box">
			<el-button type="primary" size="mini" @click="submit_but">确定</el-button>
			<el-button type="info" size="mini" @click="close_but">取消</el-button>
		</div>

	</div>

</template>

<script>
	import { getChilComList, getProductList, getCompanyList } from '@/api/baseDate'
	export default {
		name: "claimentry",
		data() {
			return {
				dialogVisible: false,
				dialogImageUrl: "",
				value: '',
				input: '',
				value1: '',
				currentPage3: '',
				tableData1: [],
				tableData2: [],
				options: [{
					value: "1",
					label: "1"
				}],
				inForm: {
					name: '',
					tions: '',
					productname: '',
				},
				rules: {
					name: [{
						required: false,
						message: '请选择保险公司',
						trigger: 'change'
					}],
					tions: [{
						required: false,
						message: '请选择分支机构',
						trigger: 'change'
					}],
					productname: [{
						required: false,
						message: '请选择产品名称',
						trigger: 'change'
					}],
					applicationsupplement: [{
						required: false,
						message: '请选择自动申报补录',
						trigger: 'change'
					}],
					policystatus: [{
						required: false,
						message: '请选择保单状态',
						trigger: 'change'

					}]
				},
				options_insuranceCompanyName: [],
				options_companyName: [],
				options2: [],
				total: 0,
				fileList: []
			}
		},
		created() {

			const companyCode = this.$store.state.user.userinfo.insuranceCompanyCode
			this.get_select(companyCode)

		},
		methods: {
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			View_but() {

				this.dialogFormVisible = true
			},
			handleClose() {
				this.$refs.ruleForm.resetFields()
				this.form = {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				}
			},
			handleSave() {

			},
			//查询
			search_s(formName) {
				var data = {}

				this.$refs[formName].validate((valid) => {
					if(valid) {
						alert('submit!');
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//重置
			search_s_clear() {

				var inForm = {

				}

			},
			//------下拉信息
			get_select(code) {
				this.findInsuranceCompany_fun(code)
				this.companyqueryAll_fun(code)
				this.riskqueryAll_fun(code)

			},

			//保险公司
			findInsuranceCompany_fun(code) {

				var data = {
					insuranceCompanyCode: code
				}

				getCompanyList(data).then(res => {
					var obj = {}
					this.options_insuranceCompanyName = []
					for(var i = 0; i < res.length; i++) {
						console.log(res)
						obj.value = res[i].insuranceCompanyCode
						obj.label = res[i].insuranceCompanyName
						this.options_insuranceCompanyName.push(obj)
					}

				})
			},
			//分支机构
			companyqueryAll_fun(code) {

				var data = {
					insuranceCompanyCode: code
				}

				getChilComList(data).then(res => {

					for(var i = 0; i < res.length; i++) {
						var obj = {}
						obj.value = res[i].companyCode
						obj.label = res[i].companyName
						this.options_companyName.push(obj)
					}

				})

			},
			//产品名称
			riskqueryAll_fun(code) {
				var data = {
					insuranceCompanyCode: code
				}

				getProductList(data).then(res => {

					this.options2 = []
					for(var i = 0; i < res.length; i++) {
						var obj = {}
						obj.value = res[i].riskCode
						obj.label = res[i].riskName
						this.options2.push(obj)
					}

					console.log(this.options2)

				})

			},
			//提交图片信息
			submitUpload() {

				if(this.fileList.length <= 0) {
					if(this.tableData1.length <= 1) {

						this.$alert('请上传事故照片、发票影像件', '提示', {
							confirmButtonText: '确定',

						});

					} else {
						this.$alert('请上传事故照片、发票、提单、装箱单影像件', '提示', {
							confirmButtonText: '确定',

						});

					}

				}

				console.log(this.fileList)
			},
			//图片上传成功后
			success_img(response, file, fileList) {
				//				console.log(fileList)
				this.fileList = fileList

			},
			//图片删除时
			handleRemove(file, fileList) {
				//				console.log(fileList);
				this.fileList = fileList
			},
			//图片上传时
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			//确定
			submit_but(){
				
			},
			//取消
			close_but() {

				// 返回上一步路由
				this.$router.go(-1)

//              this.$router.push({
//					name: 'claimquery'
//				})
				//关闭导航栏
				this.$store.dispatch('delVisitedViews', this.$route)

			}

		}
	}
</script>
<style scoped>
	.el-table th,
	.el-table td {
		text-align: center !important;
	}
	
	.el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #A23131;
		color: #FFF;
	}
	
	.el-pagination.is-background .el-pager li.active {
		color: #fff;
		cursor: default;
	}
	
	.el-pagination.is-background .el-pager li:hover {
		color: #A23131;
	}
	
	.el-pagination.is-background .el-pager li:not(.disabled):hover {
		color: #A23131;
	}
	
	.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
		background-color: #A23131;
		color: #FFF;
	}
	
	.search_box1 {
		/*margin-bottom: 10px;*/
	}
	
	.search_box1 .el-input,
	.search_box1 .el-select {
		width: 200px;
	}
	
	.el-autocomplete {
		width: 200px;
	}
	
	.search_box1 .label {
		text-align: left;
		width: 120px;
	}
	
	.el-form-item__content {
		display: flex;
	}
	
	.el-form-item {
		margin-bottom: 5px;
	}
	
	thead th {
		color: #909399 !important;
	}
	.submit_box{
		text-align: center;
		margin:10px 0;
	}
</style>
<style>
	.content {
		padding: 15px;
	}
	
	.title_s {
		font-size: 14px;
		font-weight: bold;
	}
	
	.label_s {
		font-size: 14px;
		margin-right: 20px;
	}
	
	.search_box1 {
		text-align: center;
		margin: 0;
	}
	
	.search_box1 button {
		/*background: #4D69F6;
		border: #4D69F6;*/
		width: 180px;
		margin: 25px 0;
	}
	
	.search_box1 .button2 {
		background: #E0E4E8;
		color: #333;
		border: #E0E4E8;
	}
	
	.search_input i {
		color: #A23131;
		font-size: 15px;
	}
	
	.but_box {
		text-align: center;
		margin: 40px 0;
	}
	
	.but_box button {
		width: 194px;
		background: #4D69F6;
	}
	
	.but_box button:last-child {
		background: #E0E4E8;
		color: #333;
		border: #E0E4E8;
	}
	
	.label {
		width: 100px;
		display: inline-block;
		text-align: center;
		position: relative;
		font-size: 14px;
	}
	
	.dialog_footer {
		margin: 20px 0;
		text-align: center;
	}
	
	.dialog_footer button {
		width: 150px;
		background: #4D69F6;
	}
	
	.dialog_footer button:last-child {
		background: #E0E4E8;
		color: #333;
		border: #E0E4E8;
	}
	
	.red_s {
		color: red;
		position: absolute;
		left: -10px;
	}
	
	.el-table__header tr,
	.el-table__header th {
		text-align: center;
		background-color: #E0E4E8;
		padding: 0;
		height: 40px;
		font-size: 12px;
	}
	
	.el-table__body tr,
	.el-table__body td {
		text-align: center;
		padding: 0;
		height: 40px;
		font-size: 12px;
	}
	
	.el-upload-dragger {
		height: 148px;
		width: 148px;
	}
</style>